import React, { Component } from "react";

class App extends Component {
  state = {
    textValue: "",
    areaValue: "",
    selectValue: "",
    radioValue: "",
    checkValue: [],
  };

  handleChange1 = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };
  handleChange2 = (e) => {
    this.setState({
      areaValue: e.target.value,
    });
  };
  handleChange3 = (e) => {
    this.setState({
      selectValue: e.target.value,
    });
  };
  handleChange4 = (e) => {
    this.setState({
      radioValue: e.target.value,
    });
  };

  handleChange5 = (e) => {
    // console.log(e.target.value, e.target.checked);
    if (e.target.checked) {
      this.state.checkValue.push(e.target.value);
      this.setState({});
    } else {
      const newArr = this.state.checkValue.filter(
        (item) => item !== e.target.value
      );
      this.setState({
        checkValue: newArr,
      });
    }
  };

  handleClick = () => {
    console.log("textValue:" + this.state.textValue);
    console.log("areaValue:" + this.state.areaValue);
    console.log("selectValue:" + this.state.selectValue);
    console.log("radioValue:" + this.state.radioValue);
    console.log("checkValue:", this.state.checkValue);
  };

  render() {
    return (
      <>
        <h2>form表单</h2>
        <h4>普通的input框</h4>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange1}
        />
        <hr />
        <h4>多行文本框</h4>
        <textarea
          value={this.state.areaValue}
          onChange={this.handleChange2}
        ></textarea>
        <hr />
        <h4>下拉框</h4>
        <select value={this.state.selectValue} onChange={this.handleChange3}>
          <option value="" disabled>
            --- 请选择 ---
          </option>
          <option value={1}>男</option>
          <option value={2}>女</option>
          <option value={3}>未知</option>
        </select>
        <hr />
        <h4>单选框</h4>
        <input
          type="radio"
          name="xueli"
          value="a"
          onChange={this.handleChange4}
        />
        高中
        <input
          type="radio"
          name="xueli"
          value="b"
          onChange={this.handleChange4}
        />
        专科
        <input
          type="radio"
          name="xueli"
          value="c"
          onChange={this.handleChange4}
        />
        本科
        <input
          type="radio"
          name="xueli"
          value="d"
          onChange={this.handleChange4}
        />
        研究生
        <hr />
        <h4>复选框</h4>
        <input type="checkbox" value="sing" onChange={this.handleChange5} />唱
        <input type="checkbox" value="dance" onChange={this.handleChange5} />跳
        <input type="checkbox" value="rap" onChange={this.handleChange5} />
        rap
        <input
          type="checkbox"
          value="basketball"
          onChange={this.handleChange5}
        />
        篮球
        <hr />
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
